<template>
  <view class="page">
    <view class="relative">
      <image src="@/static/bg.png" mode="widthFix" class="w-full" />
      <view class="!absolute left-0 right-0 top-0">
        <van-nav-bar :border="false" class="!bg-transparent">
          <template #title>
            <view class="flex items-center">
              <img class="w-6 h-6 mr-1" src="@/static/logo-white.png" />
              <text class="font-semibold text-2xl text-white">课程推荐</text>
            </view>
          </template>
        </van-nav-bar>
        <view class="mt-6 px-4 text-white text-base">
          <view class="text-sm text-white/80 mb-2.5">您的企业目前有以下现状：</view>
          <view class="">1.组织响应能力不足 </view>
          <view>2.绩效管理不佳 </view>
          <view>3.策略执行力缺乏 </view>
          <view>4.企业文化建设欠缺</view>
          <view class="text-sm text-white/80 mt-2.5"
            >针对这些问题，我为您精心挑选了以下几门课程：</view
          >
        </view>

        <view class="mt-7">
          <view
            class="mx-3 p-2 text-white/80 flex items-center justify-between rounded-tl-md rounded-tr-md bg-gradient-to-r from-#007bc6 from-0% via-rgba(0,130,200,0.4) via-63% to-rgba(29,154,221,0.1)"
          >
            <view
              class="relative bg-transparent border-1 border-solid border-white/60 rounded-18px py-1 px-2 text-sm text-white font-normal flex items-center"
            >
              <text class="mr-2">定位升级</text>
              <image
                src="@/static/arrow-down.png"
                mode="aspectFit"
                class="w-3 h-3 transform rotate-180"
              />

              <view
                class="bg-white rounded-lg shadow-[0px_3px_6px_0px_rgba(168,182,191,0.2)] text-sm absolute top-8 left-0 w-full px-4 z-10 box-border"
              >
                <view
                  v-for="i in 3"
                  :key="i"
                  class="border-0 border-solid border-#eaeaea py-3 text-black text-center not-last:border-b-1"
                  >升级</view
                >
              </view>
            </view>
            <view class="text-xs">查看详情>></view>
          </view>
          <view class="rounded-tl-lg rounded-tr-lg bg-white">
            <view class="flex items-center justify-center pt-3.5 pb-7">
              <image src="@/static/notice.png" mode="aspectFit" class="h-4 w-4 mr-1" />
              <text class="text-xs underline text-primary">兰湘子创始人也在学</text>
            </view>

            <view class="relative mx-6 pt-6">
              <image src="@/static/gradient_triangle.png" mode="widthFix" class="w-full" />
              <view
                class="absolute top-0 w-full bg-clip-text text-transparent bg-gradient-to-b from-#c9ebff to-white to-85% uppercase text-3xl text-center font-semibold"
              >
                gaowei
              </view>
              <view class="text-22px absolute top-3 left-0 right-0 text-center font-medium">
                <view>售 价</view>

                <view class="text-primary mt-3 text-2xl font-semibold text-center"
                  >￥1999/课时</view
                >
              </view>
            </view>

            <view class="bg-#f4fbff mx-3 px-3 py-6 rounded-xl -mt-1">
              <view class="relative mb-11">
                <view
                  class="bg-clip-text text-transparent bg-gradient-to-b from-#c9ebff to-white to-85% uppercase text-3xl text-center font-semibold"
                >
                  gaowei
                </view>
                <view class="text-22px absolute top-3 left-0 right-0 text-center font-medium">
                  开课城市
                </view>
                <view class="text-sm text-center pt-5"> 北京、杭州、天津 </view>
              </view>

              <view class="relative mb-6">
                <view
                  class="bg-clip-text text-transparent bg-gradient-to-b from-#c9ebff to-white to-85% uppercase text-3xl text-center font-semibold"
                >
                  gaowei
                </view>
                <view class="text-22px absolute top-3 left-0 right-0 text-center font-medium">
                  课程介绍
                </view>
                <view class="text-sm text-center pt-5">
                  《经营者养成》课程专为提升企业经营能力设计，涵盖企业经营的各个方面，特别是针对企业经营中常见的坑点进行深入剖析。</view
                >
              </view>

              <view class="relative mb-6">
                <view
                  class="bg-clip-text text-transparent bg-gradient-to-b from-#c9ebff to-white to-85% uppercase text-3xl text-center font-semibold"
                >
                  gaowei
                </view>
                <view class="text-22px absolute top-3 left-0 right-0 text-center font-medium">
                  推荐理由
                </view>
                <view class="text-sm text-center pt-5">
                  <text class="text-primary">餐饮业的必学课程之一</text>，您的企业目前面临的组
                  织响应能力不足和策略执行力缺乏，很可能是由于缺
                  乏有效的经营策略和实践经验。这门课程将帮助您提
                  升管理能力，更好地应对企业经营中的挑战。搭配科
                  学分钱课程，能够更好地帮您进行企业管理。</view
                >
              </view>
            </view>
            <view class="mt-3.5 flex items-center justify-center">
              <view
                v-for="i in 4"
                :key="i"
                class="w-3 h-3 rounded-full my-3 bg-#c9ebff not-last:mr-2 safe-area-inset-bottom"
              ></view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { onShow, onLoad } from '@dcloudio/uni-app';
  import { showConfirmDialog } from 'vant';

  const form = ref({
    phone: '',
    msgCode: '',
    agree: false,
  });

  const showToast = ref(false);

  const openedSelectIndex = ref();

  const handleCloseMask = () => {
    openedSelectIndex.value = -1;
  };

  const showOptions = (i) => {
    openedSelectIndex.value = i;
  };

  const handleSelect = () => {
    openedSelectIndex.value = -1;
  };

  const handleMove = (e) => {
    if (openedSelectIndex.value > -1) {
      e.preventDefault();
    }
  };

  const handleSubmit = () => {
    showToast.value = true;

    showConfirmDialog({
      width: 380,
      title: '标题',
      message: '确认要提交问卷吗?',
    })
      .then(() => {
        // on confirm
      })
      .catch(() => {
        // on cancel
      });
  };

  onLoad(() => {});
</script>
